<template>
    <div>
        <v-tabs v-model="tab_room" density="compact" style="flex-shrink: 0;">
            <!--<v-tab value="home">桌面物品</v-tab>-->
            <v-tab value="card">卡面管理</v-tab>
            <v-tab value="cardType">类型数据</v-tab>
            <v-tab value="roomData">数据存档</v-tab>
        </v-tabs>

        <div style="width: 100%;overflow: auto;">
            <v-tabs-window v-model="tab_room">
                <v-tabs-window-item value="home">

                </v-tabs-window-item>
                <v-tabs-window-item value="card">
                    <v-row no-gutters>
                        <v-col>
                            <v-autocomplete :prepend-inner-icon="mdiArrowRight" no-data-text="无可用卡面" hide-details
                                placeholder="置空表示新卡面" density="compact" v-model="choosedRoomCardId" label="卡面" clearable
                                :items="(() => {
                                    let index = 0
                                    return room.cardNameList.flatMap((v) => { return { value: v.id, title: v.name } }).sort()
                                })()">
                            </v-autocomplete>
                        </v-col>
                        <v-col>
                            <v-autocomplete :prepend-inner-icon="mdiArrowLeft" hide-details density="compact"
                                no-data-text="无可用卡面存档" v-model="choosedLocalCardId" label="卡面存档" clearable
                                placeholder="置空表示新卡面" :items="cardList.listByTime"></v-autocomplete>
                        </v-col>
                    </v-row>
                    <v-row no-gutters>
                        <v-col cols="4">
                            <v-autocomplete :disabled="choosedRoomCard == null" hide-details density="compact"
                                no-data-text="无可用类型" :model-value="choosedRoomCard?.type" label="类型"
                                @update:model-value="value => { if (choosedRoomCard != null) choosedRoomCard.type = value }"
                                :items="room.usingRoom.cardTypeList.flatMap(v => v.name)"></v-autocomplete>
                        </v-col>

                        <v-col cols="4">
                            <v-autocomplete :disabled="choosedRoomCard == null" hide-details density="compact"
                                no-data-text="无可用组" label="权限组" multiple :items="room.defaultRoleList">
                                <template #selection></template>

                            </v-autocomplete>
                        </v-col>

                        <v-col cols="4">
                            <v-autocomplete :disabled="choosedRoomCard == null" hide-details density="compact"
                                no-data-text="无可用组" label="能见组" multiple :items="room.defaultRoleList">
                                <template #selection></template>
                            </v-autocomplete>
                        </v-col>
                    </v-row>
                    <v-row no-gutters>
                        <v-col cols="3">
                            <FeedBackButton name="保存卡面" block color="success" :disabled="choosedRoomCard == null"
                                @click="() => {
                                    if (choosedRoomCard == null) {
                                        return
                                    }
                                    if (choosedLocalCardId) {
                                        cardList.saveCard(choosedRoomCard, choosedLocalCardId, true)
                                    } else {
                                        let cardName = room.getCardName(choosedRoomCard)
                                        cardList.saveCard(choosedRoomCard, cardName, false)
                                        choosedLocalCardId = cardName
                                    }
                                }">

                            </FeedBackButton>
                        </v-col>
                        <v-col cols="3">
                            <FeedBackButton name="另存卡面" color="success"
                                @click="rename = room.getCardName(choosedRoomCard)" block
                                :disabled="choosedRoomCard == null" dialog dialog-title="另存卡面">
                                <template #dialog="{ isActive }">
                                    <v-text-field label="新文件名" v-model="rename"></v-text-field>
                                    <v-row no-gutters>
                                        <v-col>
                                            <FeedBackButton name="取消" block color="warning"
                                                @click="isActive.value = false">
                                            </FeedBackButton>
                                        </v-col>
                                        <v-col>
                                            <FeedBackButton name="确认" block color="success" @click="() => {
                                                if (choosedRoomCard == null) { return }
                                                choosedLocalCardId = cardList.saveCard(choosedRoomCard, rename, false);
                                                isActive.value = false
                                            }"></FeedBackButton>
                                        </v-col>
                                    </v-row>
                                </template>
                            </FeedBackButton>
                        </v-col>

                        <v-col cols="3">
                            <FeedBackButton name="重命名卡面存档" :disabled="choosedLocalCardId == null" block color="success"
                                dialog dialog-title="重命名卡面存档" @click="rename = choosedLocalCardId">
                                <template #dialog="{ isActive }">
                                    <v-text-field label="新文件名" v-model="rename"></v-text-field>
                                    <v-row no-gutters>
                                        <v-col>
                                            <FeedBackButton name="取消" block color="warning"
                                                @click="isActive.value = false">
                                            </FeedBackButton>
                                        </v-col>
                                        <v-col>
                                            <FeedBackButton name="确认" block color="success" @click="() => {
                                                choosedLocalCardId = cardList.saveCard(choosedLocalCard(), rename, false);
                                                cardList.deleteCard(choosedLocalCardId)
                                                isActive.value = false
                                            }"></FeedBackButton>
                                        </v-col>
                                    </v-row>
                                </template>
                            </FeedBackButton>
                        </v-col>
                        <v-col cols="3">
                            <FeedBackButton v-if="choosedRoomCardId == null"
                                :name="(choosedLocalCardId == null) ? '新建卡面' : '读取卡面'" block color="success" @click="() => {
                                    choosedRoomCardId = room.pushElement(cardElement(choosedLocalCard())).toString()
                                }">
                            </FeedBackButton>
                            <FeedBackButton v-else :name="(choosedLocalCardId == null) ? '清空卡面' : '读取卡面'" block
                                color="warning" dialog dialog-title="读取卡面">
                                <template #dialog="{ isActive }">
                                    <span>这会清除所有现有数据</span>
                                    <v-row no-gutters>
                                        <v-col>
                                            <FeedBackButton name="取消" block color="success"
                                                @click="isActive.value = false">
                                            </FeedBackButton>
                                        </v-col>

                                        <v-col>
                                            <FeedBackButton name="另存当前数据" block color="success" @click="() => {
                                                cardList.saveCard(choosedRoomCard ?? new card());
                                                room.updateElement(choosedRoomCardId ?? '', cardElement(choosedLocalCard()));
                                                isActive.value = false
                                            }"></FeedBackButton>
                                        </v-col>
                                        <v-col>
                                            <FeedBackButton name="放弃当前数据" block color="warning" @click="() => {
                                                room.updateElement(choosedRoomCardId ?? '', cardElement(choosedLocalCard()));
                                                isActive.value = false
                                            }"></FeedBackButton>
                                        </v-col>
                                    </v-row>
                                </template>
                            </FeedBackButton>
                        </v-col>
                    </v-row>
                    <v-row no-gutters>
                        <v-col cols="6">
                            <FeedBackButton name="删除卡面" :disabled="choosedRoomCardId == null" block color="error" dialog
                                dialog-title="删除卡面">
                                <template #dialog="{ isActive }">
                                    <span>真的要删除这项存档吗</span>
                                    <v-row no-gutters>
                                        <v-col>
                                            <FeedBackButton name="取消" block color="success"
                                                @click=" isActive.value = false"></FeedBackButton>
                                        </v-col>
                                        <v-col>
                                            <FeedBackButton name="删除" block color="error"
                                                @click=" room.deleteElement(choosedRoomCardId); choosedRoomCardId = undefined; isActive.value = false">
                                            </FeedBackButton>
                                        </v-col>
                                    </v-row>
                                </template>
                            </FeedBackButton>
                        </v-col>

                        <v-col cols="6">
                            <FeedBackButton name="删除卡面存档" :disabled="choosedLocalCardId == null" block color="error"
                                dialog dialog-title="删除卡面存档">
                                <template #dialog="{ isActive }">
                                    <span>真的要删除这项存档吗</span>
                                    <v-row no-gutters>
                                        <v-col>
                                            <FeedBackButton name="取消" block color="success"
                                                @click=" isActive.value = false"></FeedBackButton>
                                        </v-col>
                                        <v-col>
                                            <FeedBackButton name="删除" block color="error"
                                                @click="cardList.deleteCard(choosedLocalCardId); choosedLocalCardId = undefined; isActive.value = false">
                                            </FeedBackButton>
                                        </v-col>
                                    </v-row>
                                </template>
                            </FeedBackButton>
                        </v-col>
                    </v-row>
                    <v-row no-gutters>
                        <v-col cols="3">
                            <FeedBackButton name="导出卡面" :disabled="choosedRoomCardId == null" block color="success"
                                @click="cardDownload(choosedRoomCardId ?? 'mania_trpg', choosedRoomCard ?? new card())">
                            </FeedBackButton>
                        </v-col>
                        <v-col cols="3">
                            <FeedBackButton name="导出存档" :disabled="choosedLocalCardId == null" block color="success"
                                @click="cardDownload(choosedLocalCardId ?? 'mania_trpg', choosedLocalCard())">
                            </FeedBackButton>
                        </v-col>
                        <v-col cols="3">
                            <FeedBackButton name="导入到卡面" dialog dialog-title="导入到卡面" block color="success">
                                <template #dialog="{ isActive }"><v-file-input multiple chips
                                        @update:model-value="data => { importFiles = data as File[] }" label="卡面文件">
                                    </v-file-input>
                                    <v-row no-gutters>
                                        <v-col>
                                            <FeedBackButton name="取消" block color="warning"
                                                @click="isActive.value = false">
                                            </FeedBackButton>
                                        </v-col>
                                        <v-col>
                                            <FeedBackButton name="导入" block color="success" @click="() => {
                                                let successNum = 0
                                                let failNum = 0
                                                cardUpload(importFiles, (card, file) => {
                                                    if (card != null) {
                                                        room.pushElement(cardElement(card))
                                                        successNum++
                                                    }
                                                    else {
                                                        failNum++
                                                    }
                                                    sendMessage(`导入中...成功${successNum}项,失败${failNum}项`, failNum > 0 ? 'error' : 'success')
                                                })
                                                isActive.value = false
                                            }"></FeedBackButton>
                                        </v-col>
                                    </v-row>
                                </template>
                            </FeedBackButton>
                        </v-col>
                        <v-col cols="3">
                            <FeedBackButton name="导入到存档" dialog dialog-title="导入到存档" block color="success">
                                <template #dialog="{ isActive }">
                                    <v-file-input multiple chips
                                        @update:model-value="data => { importFiles = data as File[] }" label="卡面文件">
                                    </v-file-input>
                                    <v-row no-gutters>
                                        <v-col>
                                            <FeedBackButton name="取消" block color="warning"
                                                @click="isActive.value = false">
                                            </FeedBackButton>
                                        </v-col>
                                        <v-col>
                                            <FeedBackButton name="导入" block color="success" @click="() => {
                                                let successNum = 0
                                                let failNum = 0
                                                cardUpload(importFiles, (card, file) => {
                                                    if (card != null) {
                                                        cardList.saveCard(card, file.name.substring(0, file.name.indexOf('.')), false)
                                                        successNum++
                                                    }
                                                    else {
                                                        failNum++
                                                    }
                                                    sendMessage(`导入中...成功${successNum}项,失败${failNum}项`, failNum > 0 ? 'error' : 'success')
                                                })
                                                isActive.value = false
                                            }"></FeedBackButton>
                                        </v-col>
                                    </v-row>
                                </template>
                            </FeedBackButton>

                        </v-col>
                    </v-row>
                </v-tabs-window-item>
                <v-tabs-window-item value="cardType">

                    <v-row no-gutters>
                        <v-col cols="8">
                            <v-autocomplete :prepend-inner-icon="mdiArrowDown" no-data-text="没有保存类型" hide-details
                                density="compact" v-model="choosedLocalType" label="已保存的类型" clearable :items="[

                                    ...(internalCardTypeList).flatMap((v) => {
                                        return {
                                            value: v, title: v.name, subTitle: '内建类型：' + v.name
                                        }
                                    }),
                                    ...(cardTypeList.listByTime.flatMap((v) => {
                                        return {
                                            value: cardTypeList.storgedCardType[v].type, subTitle: v, title: cardTypeList.storgedCardType[v].type.name
                                        }
                                    }))
                                ]">
                                <template #item="{ item, props }">
                                    <v-list-item v-bind="props" :title="item.raw.title" :subtitle="item.raw.subTitle">
                                    </v-list-item>
                                </template>
                            </v-autocomplete>
                        </v-col>
                        <v-col cols="4">
                            <FeedBackButton :color="localTypeInRoom ? 'warning' : 'success'"
                                :disabled="choosedLocalType == null" :name="localTypeInRoom ? '读取并覆盖' : '读取'" block
                                @click="() => {
                                    room.addType(choosedLocalType, true)
                                }">
                            </FeedBackButton>
                        </v-col>
                    </v-row>
                    <v-list density="compact" title="已导入的卡面类型"
                        :items="room.usingRoom.cardTypeList.flatMap(v => v.name)">
                        <template #append="{ item }">
                            <FeedBackButton name="移除" color="warning" block @click="room.deleteType(item)">
                            </FeedBackButton>
                        </template>
                    </v-list>
                </v-tabs-window-item>
                <v-tabs-window-item value="roomData">
                    <v-row no-gutters>
                        <v-col>
                            <v-autocomplete hide-details density="compact" v-model="roomSaveName" label="存档名称"
                                :items="room.roomListByTime" hide-no-data clearable></v-autocomplete>
                        </v-col>

                    </v-row>
                    <v-row no-gutters>
                        <v-col cols="3">
                            <FeedBackButton name="保存" color="success" block
                                @click="roomSaveName = room.saveRoom(roomSaveName, true)">
                            </FeedBackButton>
                        </v-col>
                        <v-col cols="3">
                            <FeedBackButton name="另存为" color="success" block @click="rename = roomSaveName" dialog
                                dialog-title="另存为">
                                <template #dialog="{ isActive }">
                                    <v-text-field label="新文件名" v-model="rename"></v-text-field>
                                    <v-row no-gutters>
                                        <v-col>
                                            <FeedBackButton name="取消" block color="warning"
                                                @click="isActive.value = false">
                                            </FeedBackButton>
                                        </v-col>
                                        <v-col>
                                            <FeedBackButton name="确认" block color="success" @click="() => {
                                                roomSaveName = room.saveRoom(rename, false, room.usingRoom);
                                                isActive.value = false
                                            }"></FeedBackButton>
                                        </v-col>
                                    </v-row>
                                </template>
                            </FeedBackButton>
                        </v-col>
                        <v-col cols="3">
                            <FeedBackButton name="读取" color="warning" block :disabled="!saveNameInstorgedRoomNames"
                                dialog dialog-title="读取">
                                <template #dialog="{ isActive }">
                                    <span>这会清除所有现有数据</span>
                                    <v-row no-gutters>
                                        <v-col>
                                            <FeedBackButton name="取消" block color="success"
                                                @click="isActive.value = false">
                                            </FeedBackButton>
                                        </v-col>

                                        <v-col>
                                            <FeedBackButton name="另存当前数据" block color="success"
                                                @click="room.saveRoom(); room.readRoom(roomSaveName); isActive.value = false">
                                            </FeedBackButton>
                                        </v-col>
                                        <v-col>
                                            <FeedBackButton name="放弃当前数据" block color="warning"
                                                @click="room.readRoom(roomSaveName); isActive.value = false">
                                            </FeedBackButton>
                                        </v-col>
                                    </v-row>
                                </template>

                            </FeedBackButton>
                        </v-col>
                        <v-col cols="3">
                            <FeedBackButton name="删除" color="error" block :disabled="!saveNameInstorgedRoomNames" dialog
                                dialog-title="删除">
                                <template #dialog="{ isActive }">
                                    <span>真的要删除这项存档吗</span>
                                    <v-row no-gutters>
                                        <v-col>
                                            <FeedBackButton name="取消" block color="success"
                                                @click=" isActive.value = false"></FeedBackButton>
                                        </v-col>
                                        <v-col>
                                            <FeedBackButton name="删除" block color="error"
                                                @click="delete room.storgedRoom[roomSaveName ?? '']; roomSaveName = undefined; isActive.value = false">
                                            </FeedBackButton>
                                        </v-col>
                                    </v-row>
                                </template>
                            </FeedBackButton>
                        </v-col>
                    </v-row>
                    <v-row no-gutters>

                        <v-col cols="4">
                            <FeedBackButton name="重命名" color="success" :disabled="!saveNameInstorgedRoomNames" block
                                dialog dialog-title="重命名" @click="rename = roomSaveName">
                                <template #dialog="{ isActive }">
                                    <v-text-field label="新文件名" v-model="rename"></v-text-field>
                                    <v-row no-gutters>
                                        <v-col>
                                            <FeedBackButton name="取消" block color="warning"
                                                @click="isActive.value = false">
                                            </FeedBackButton>
                                        </v-col>
                                        <v-col>
                                            <FeedBackButton name="确认" block color="success" @click="() => {
                                                room.saveRoom(rename, false, room.getRoom(roomSaveName));
                                                delete room.storgedRoom[roomSaveName ?? ''];
                                                roomSaveName = rename
                                                isActive.value = false
                                            }"></FeedBackButton>
                                        </v-col>
                                    </v-row>
                                </template>
                            </FeedBackButton>
                        </v-col>
                        <v-col cols="4">
                            <FeedBackButton name="复制" color="success" :disabled="!saveNameInstorgedRoomNames" block
                                dialog dialog-title="复制" @click="rename = roomSaveName">
                                <template #dialog="{ isActive }">
                                    <v-text-field label="新文件名" v-model="rename"></v-text-field>
                                    <v-row no-gutters>
                                        <v-col>
                                            <FeedBackButton name="取消" block color="warning"
                                                @click="isActive.value = false">
                                            </FeedBackButton>
                                        </v-col>
                                        <v-col>
                                            <FeedBackButton name="确认" block color="success"
                                                @click="
                                                    roomSaveName = room.saveRoom(rename, false, room.getRoom(roomSaveName)); isActive.value = false">
                                            </FeedBackButton>
                                        </v-col>
                                    </v-row>
                                </template>

                            </FeedBackButton>
                        </v-col>

                        <v-col cols="4">
                            <FeedBackButton name="清空当前房间" color="error" block dialog dialog-title="清空当前房间">
                                <template #dialog="{ isActive }">
                                    <span>这会清除所有现有数据</span>
                                    <v-row no-gutters>
                                        <v-col>
                                            <FeedBackButton name="取消" block color="success"
                                                @click="isActive.value = false">
                                            </FeedBackButton>
                                        </v-col>

                                        <v-col>
                                            <FeedBackButton name="另存当前数据" block color="success"
                                                @click="room.saveRoom(); room.importRoom(new RoomData()); isActive.value = false">
                                            </FeedBackButton>
                                        </v-col>
                                        <v-col>
                                            <FeedBackButton name="清空" block color="error"
                                                @click="room.importRoom(new RoomData()); choosedRoomCardId = undefined; isActive.value = false">
                                            </FeedBackButton>
                                        </v-col>
                                    </v-row>
                                </template>

                            </FeedBackButton>
                        </v-col>
                    </v-row>
                    <v-row no-gutters>

                        <v-col cols="4">
                            <FeedBackButton name="导出当前房间" color="success" block
                                @click="roomDownload('mania_trpg', room.usingRoom)">
                            </FeedBackButton>
                        </v-col>
                        <v-col cols="4">
                            <FeedBackButton name="导出选中的存档" color="success" block :disabled="!saveNameInstorgedRoomNames"
                                @click="roomDownload(roomSaveName ?? '', room.storgedRoom[roomSaveName ?? ''].room)">

                            </FeedBackButton>
                        </v-col>
                        <v-col cols="4">
                            <FeedBackButton name="导入" color="success" block dialog dialog-title="导入">
                                <template #dialog="{ isActive }">
                                    <v-file-input multiple chips
                                        @update:model-value="data => { importFiles = data as File[] }" label="房间数据文件">
                                    </v-file-input>
                                    <v-row no-gutters>
                                        <v-col>
                                            <FeedBackButton name="取消" block color="warning"
                                                @click="isActive.value = false">
                                            </FeedBackButton>
                                        </v-col>
                                        <v-col>
                                            <FeedBackButton name="导入" block color="success" @click="() => {
                                                let successNum = 0
                                                let failNum = 0
                                                roomUpload(importFiles, (r, file) => {
                                                    if (r != null) {
                                                        room.saveRoom(file.name.substring(0, file.name.indexOf('.')), false, r);
                                                        successNum++
                                                    }
                                                    else {
                                                        failNum++
                                                    }
                                                    sendMessage(`导入中...成功${successNum}项,失败${failNum}项`, failNum > 0 ? 'error' : 'success')
                                                })
                                                isActive.value = false
                                            }"></FeedBackButton>
                                        </v-col>
                                    </v-row>
                                </template>
                            </FeedBackButton>
                        </v-col>
                    </v-row>
                </v-tabs-window-item>
            </v-tabs-window>
        </div>
    </div>
</template>

<script setup lang="ts">

import { useCardList } from '@/stores/cardList';
import { computed, ref } from 'vue';
import card from '@/ts/cardData/card';
import { useRoom } from '@/stores/room';
import RoomData from '@/ts/roomData';
import { useCardTypeList } from '@/stores/cardTypeList';
import { mdiArrowDown, mdiArrowLeft, mdiArrowRight } from '@mdi/js';
import { sendMessage } from '@/ts/message';
import FeedBackButton from '@/components/button/FeedBackButton.vue';
import cardType, { internalCardTypeList } from '@/ts/cardType/cardType';
import { cardElement } from '@/ts/element';
import { cardDownload, cardUpload, roomDownload, roomUpload } from '@/ts/FileIO';

//stores
const cardList = useCardList()
const cardTypeList = useCardTypeList()
const room = useRoom()


//tab-room
const tab_room = ref("card")
const choosedRoomCardId = ref<string>()
const choosedLocalCardId = ref<string>()
const roomSaveName = ref<string>()
const choosedRoomCard = computed(() => {
    let ele = room.getElement(choosedRoomCardId.value ?? '')
    return ele?.type == 'card' ? ele.card : null
})
function choosedLocalCard() {
    return cardList.getCard(choosedLocalCardId.value)
}
const choosedLocalType = ref<cardType>()


//dialog
const rename = ref('')
const importFiles = ref([] as File[])
const saveNameInstorgedRoomNames = computed(() => {
    return Object.keys(room.storgedRoom).includes(roomSaveName.value ?? '')
})

const localTypeInRoom = computed(() => {
    return room.getType(choosedLocalType.value?.name) != null
})
</script>

<style scoped></style>